<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="js/datepicker/skin/WdatePicker.css">
    <style>
        *{margin: 0;padding: 0;}
        .wrap{width: 1240px;margin: 0 auto;}
        #template{display: none;}
        .shadow{left: 0;top: 0;width: 100%;height: 100%;position: fixed;background: rgba(0, 0, 0, 0.5);display: none;}
        .add{width: 600px;position: fixed; left: 50%;top: 50%;transform: translate(-50%,-50%);padding: 20px 50px;background-color: #fff;border-radius:10px;display: none;}
    </style>
</head>
<body>
    <div class="wrap">
        <h2>学生信息管理系统</h2>
        <hr>
        <button class="btn btn-primary" id="addStudent" style="float:right;">+ 新增学生</button>
        <table class="table">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>所在城市</th>
                    <th>入学时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="data-wrap">
                <tr id="template">
                    <td class="data-id immutable">1</td>
                    <td class="data-name">张三</td>
                    <td class="data-age">20</td>
                    <td class="data-sex">男</td>
                    <td class="data-city">甘肃</td>
                    <td class="data-joinDate">2020-10-10</td>
                    <td class="immutable">
                        <button class="btn btn-primary data-edit">编辑</button>
                        <button class="btn btn-danger data-delete">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="shadow">
    </div>
    <div class="add">
        <h2>添加学生</h2>
        <div class="form-horizontal">
            <div class="form-group">
                <label for="data-name" class="col-sm-2 control-label">学生姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-name" placeholder="学生姓名">
                </div>
            </div>
    
            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" id="data-age" placeholder="年龄">
                </div>
            </div>
    
            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">性别</label>
                <label class="radio-inline">
                    <input type="radio" name="sex" checked>男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="data-female">女
                </label>
            </div>
    
            <div class="form-group">
                <label class="col-sm-2 control-label">所在城市</label>
                <select name="" id="province"></select>
                <select name="" id="city"></select>
                <select name="" id="area"></select>
            </div>
            
            
            <div class="form-group">
                <label class="col-sm-2 control-label">入学日期</label>
                <div class="col-sm-10">
                    <input type="input" class="form-control" id="data-joinDate" placeholder="入学日期" onClick="WdatePicker()">
                </div>
            </div>
            
            <div class="form-group" style="float:right;margin-top:20px;">
                <button id="submit" class="btn btn-primary">确认添加</button>
                <button id="cancel" class="btn btn-default">取消</button>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/citys.js"></script>
    <script src="js/datepicker/WdatePicker.js"></script>
    <script>
        let request = "http://10.35.170.252:81/"

        //弹出层
        $("#addStudent").click(function(){
            $(".shadow").show();
            $(".add").show();
            $("#data-name").focus();
        })

        $("#cancel").click(function(){
            $(".shadow").hide();
            $(".add").hide();
        })

        //添加学生
        $("#submit").click(function(){
            if($("#data-name").val() ==="" ||$("#data-age").val() ==="" ||$("#data-age").val() ==="" ||$("#data-joinDate").val() ===""){
                alert("有内容未填写")
                return;
            }
            let deleteTr = $(this).closest("tr")
            $.ajax({
                url:`${request}addStudent`,
                data:{
                    name:$("#data-name").val(),
                    age:$("#data-age").val(),
                    sex:$("#data-age")[0].checked ? 0 : 1,
                    city:$("#province").val() + $("#city").val() + $("#area").val(),
                    joinDate:$("#data-joinDate").val(),
                },
                success(data){
                    if(data === "success"){
                        history.go(0)
                    }else{
                        alert("操作失败")
                    }
                }
            })
        })

        //用键盘帮助用户在添加时提交/取消
        window.onkeydown = function(event){
			if(event.keyCode === 13){
				$("#submit").click()
			}
			if(event.keyCode === 27){
				$("#cancel").click()
			}
        }
        
        //删除功能
        $("#template").find(".data-delete").click(function(){
            // console.log($(this).closest("tr").find(".data-id").html())
            if(confirm(`真的要删除${$(this).closest("tr").find(".data-name").html()}？此项操作不可撤回`)){
                let deleteTr = $(this).closest("tr")
                $.ajax({
                    url:`${request}deleteStudent`,
                    data:{
                        id:$(this).closest("tr").find(".data-id").html()
                    },
                    success(data){
                        console.log(data === "success")
                        if(data === "success"){
                            deleteTr.fadeOut()
                        }else{
                            alert("删除失败")
                        }
                    }
                })
            }
        })

        //获取数据库中元素
        $.ajax({
            url: `${request}getStudentList`,
            success(data){
                data.forEach(item => {
                    let newList = $("#template").clone(true);
                    newList.attr("id","").find(".data-id").html(item.id)
                    newList.find(".data-name").html(item.name)
                    newList.find(".data-age").html(item.age)
                    newList.find(".data-sex").html(Number(item.sex)? "男":"女")
                    newList.find(".data-city").html(item.city)
                    newList.find(".data-joinDate").html(item.joinDate)
                    newList.appendTo($(".data-wrap"))
                });
            }
        })

        //编辑功能
        $("tbody td").click(function(){
            if($(this).hasClass("immutable")  || $(this).find("input").length){
                return
            }
            let value = $(this).html();
            $(this).html("").append($("<input type='text'>").val(value));
            $("td input").focus().blur(function(){
                let information = $(this).closest("tr");
                // console.log(information)
                $(this).closest("td").html($(this).val());
                $.ajax({
                    url:`${request}editStudent`,
                    data:{
                        id:information.find(".data-id").html(),
                        name:information.find(".data-name").html(),
                        age:information.find(".data-age").html(),
                        sex:information.find(".data-sex").html() === "女"? 0 : 1,
                        city:information.find(".data-city").html(),
                        joinDate:information.find(".data-joinDate").html(),
                    },
                    success(data){
                        if(data === success){

                        }
                        console.log(data)
                    }
                })
            })
        })

    </script>
</body>
</html>